<template>
    <div :class="{leftMenu:true,leftWidth:sendleft}">
        <el-scrollbar >
            <el-menu
                    style="height: 100vh "
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#304156"
                    text-color="#fff"
                    active-text-color="#409eff"
                    :collapse=sendleft
            >

                <el-menu-item index="1" @click="enterXiaoquAction" >
                    <i class="el-icon-menu"></i>
                    <span slot="title">小区管理</span>
                </el-menu-item>

                <el-submenu v-for="(v, k, i) in menuObj" :index="i + 2 + ''" :key="k">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>{{k}}</span>
                    </template>
                    <el-menu-item-group>

                        <el-menu-item v-for="(value, j) in v" :key="value" :index="(i+2)+'-'+ (j+1) " @click="showComponent(k,value)">{{value}}
                        </el-menu-item>
                    </el-menu-item-group>

                </el-submenu>
                <el-menu-item  v-for="(value, j) in menuObj2" :key="value" :index=" j+4 + ''" @click="elseXiaoquAction(value)" >
                    <i class="el-icon-menu"></i>
                    <span slot="title">{{value}}</span>
                </el-menu-item>

            </el-menu>
        </el-scrollbar>

    </div>
</template>

<script>
    export default {
        name: "LeftMenuView",
        data() {
            return {
                //键是一级标题  值-数组 是二级标题
                menuObj: {
                    帮买取快递废品回收: ["门店管理", "驿站管理", "商品管理", "订单管理", "废品回收订单"],
                    胖虎甄选: ["商品管理", "订单管理", "售后订单"],
                    胖虎家政: ["家政服务", "订单管理", "售后订单"],
                },
                menuObj2:["用户管理",
                    "骑手管理",
                    "家政管理",
                    "新用户红包",
                    "类目管理",],

                //点击二级标题切换组件  将二级标题作为键值对的键名
                //点击二级标题,查找对应的路由路径
                routerObj: {
                    门店管理: "/help/mendian",
                    驿站管理: "/help/yizhan",
                    商品管理: "/help/shangpin",
                    订单管理: "/help/dingdan",
                },

            }
        },
        props: ["sendleft"],
        created() {
            this.$emit("sendObj1",'小区管理')
        },
        methods: {
            handleOpen(value) {
                console.log(value)
            },
            handleClose(value) {
                console.log(value)
            },
            enterXiaoquAction() {
                this.$emit("sendObj1",'小区管理')
                this.$router.push("/xiaoqu").catch(() => {
                });
            },
            elseXiaoquAction(value) {
                this.$emit("sendObj3",value)
                this.$router.push("/xiaoqu").catch(() => {
                });
            },

            //点击二级标题事件 将标题作为键  取出对应的路由  切换组件
            showComponent(key,v) {
                console.log(key)
                let k = this.routerObj[v];
                console.log(v)
                this.$emit("sendObj2",key,v)
                this.$router.push(k).catch(() => {
                })
            },
        },
        computed: {

        }
    }
</script>

<style scoped>
    .leftWidth {
        float: left;
        width: 65px !important;
        transition: .5s;
    }

    .leftMenu {
        width: 230px;
        /* 1vh=设备高度1% 是将当前设备的高度分100份  一份就是1vh*/
        height: 100vh;
        background-color: #304156;
        position: fixed;
        left: 0;
        top: 0;
        transition: .5s;

        /*box-sizing: border-box;*/
        /*    盒模型总宽度250px*/
    }


    .el-menu-vertical-demo {
        border-right: none;
    }

        /*媒介查询 就是监测浏览器宽高的变化   做出页面布局调整*/
    @media only screen and (max-width: 1200px) {
        /*    页面宽度在1000px以内 才会执行此处代码
        max-width:1000px 最大能监听到1000px的宽度*/
        .leftMenu {
            visibility: hidden;
        }

    }


</style>